
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阅读 Text1</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap-icons.css">
    <script src="assets/js/jquery-3.6.0.min.js"></script>
    <style>
        body {
            background-color: #f0f9f9;
        }
        .header {
            padding: 15px;
            background: white;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .reading-tools {
            background: white;
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
        .tool-btn {
            border: none;
            background: none;
            color: #666;
            padding: 5px 15px;
            font-size: 0.9rem;
        }
        .reading-content {
            background: white;
            padding: 20px;
            line-height: 1.8;
        }
        .paragraph {
            margin-bottom: 20px;
            position: relative;
        }
        .paragraph-number {
            position: absolute;
            left: -25px;
            color: #999;
            font-size: 0.8rem;
        }
        .question-section {
            background: white;
            margin-top: 15px;
            padding: 20px;
        }
        .question {
            margin-bottom: 25px;
        }
        .option {
            display: block;
            padding: 10px;
            margin: 8px 0;
            border: 1px solid #ddd;
            border-radius: 8px;
            color: #333;
            text-decoration: none;
        }
        .option:hover {
            background: #f8f9fa;
        }
        .bottom-tools {
            position: fixed;
            bottom: 0;
            width: 100%;
            background: white;
            padding: 10px 20px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .translation-panel {
            display: none;
            background: white;
            padding: 15px;
            margin-top: 10px;
            border-radius: 8px;
            color: #666;
        }
        .translation {
            color: #666;
            background: #f8f9fa;
            padding: 10px 15px;
            margin-top: 10px;
            border-left: 3px solid #40e0d0;
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .translation.show {
            opacity: 1;
        }

        .tool-btn.active {
            color: #40e0d0;
            font-weight: bold;
        }
        
        /* 长难句相关样式 */
        .difficult-sentence {
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .difficult-sentence.highlight {
            background-color: rgba(64, 224, 208, 0.1);
            border-radius: 4px;
            padding: 2px 4px;
        }

        .sentence-analysis {
            display: none;
            background: #f8f9fa;
            padding: 15px;
            margin: 10px 0;
            border-radius: 8px;
            border-left: 3px solid #40e0d0;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .sentence-analysis.show {
            display: block;
            opacity: 1;
        }

        .analysis-title {
            color: #40e0d0;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .structure-analysis {
            margin: 10px 0;
            padding: 10px;
            background: #fff;
            border-radius: 6px;
        }

        .translation-result {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed #ddd;
        }
        /* 翻译相关样式 */
        .chinese-text {
            display: none; /* 默认隐藏中文 */
            color: #666;
            background: #f8f9fa;
            padding: 10px 15px;
            margin-top: 10px;
            border-left: 3px solid #40e0d0;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .chinese-text.show {
            display: block;
            opacity: 1;
        }

        .tool-btn {
            cursor: pointer;
            padding: 8px 15px;
            border: none;
            background: none;
            transition: all 0.3s ease;
        }

        .tool-btn.active {
            color: #40e0d0;
            font-weight: bold;
        }

        /* 添加生词相关样式 */
        .new-word {
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .new-word.highlight {
            background-color: #FFE4B5;
            border-radius: 3px;
            padding: 0 2px;
        }

        .word-tooltip {
            display: none;
            position: absolute;
            background: white;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            max-width: 300px;
            z-index: 1000;
        }

        .word-tooltip.show {
            display: block;
        }

        .word-phonetic {
            color: #666;
            font-size: 0.9em;
            margin-bottom: 5px;
        }

        .word-meaning {
            border-top: 1px solid #eee;
            padding-top: 5px;
            margin-top: 5px;
        }

        .word-type {
            color: #40e0d0;
            font-weight: bold;
            margin-right: 5px;
        }

        /* 添加新样式 */
        .word-clickable {
            cursor: pointer;
        }

        .word-clickable:hover {
            background-color: #f0f9f9;
            border-radius: 3px;
        }

        .word-tooltip {
            display: none;
            position: absolute;
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            max-width: 300px;
            z-index: 1000;
        }

        .word-tooltip.show {
            display: block;
        }

        .tooltip-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .add-vocab-btn {
            background: #40e0d0;
            color: white;
            border: none;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.9em;
            cursor: pointer;
        }

        .add-vocab-btn:hover {
            background: #3bcdc0;
        }

        .add-vocab-btn.added {
            background: #999;
        }

        .vocab-badge {
            position: fixed;
            right: 20px;
            bottom: 80px;
            background: #40e0d0;
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            cursor: pointer;
            z-index: 1000;
        }

        .vocab-list {
            display: none;
            position: fixed;
            right: 20px;
            bottom: 130px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 15px;
            max-height: 300px;
            overflow-y: auto;
            z-index: 1000;
        }

        .vocab-list.show {
            display: block;
        }

        .vocab-item {
            padding: 8px;
            border-bottom: 1px solid #eee;
        }

        .vocab-item:last-child {
            border-bottom: none;
        }

        /* 添加单词点击相关样式 */
        .word-clickable {
            cursor: pointer;
            padding: 0 2px;
            border-radius: 3px;
            transition: background-color 0.2s;
        }

        .word-clickable:hover {
            background-color: rgba(64, 224, 208, 0.1);
        }

        .word-clickable.highlighted {
            background-color: rgba(64, 224, 208, 0.2);
        }

        .word-tooltip {
            position: absolute;
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            max-width: 300px;
            z-index: 1000;
            display: none;
        }

        .word-tooltip.show {
            display: block;
        }

        .tooltip-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .collect-word-btn {
            background: #40e0d0;
            color: white;
            border: none;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.9em;
            cursor: pointer;
        }

        .collect-word-btn:hover {
            background: #3bcdc0;
        }

        .collect-word-btn.collected {
            background: #999;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header d-flex align-items-center">
        <a href="english-exam.html" class="text-dark"><i class="bi bi-chevron-left fs-4"></i></a>
        <h5 class="mb-0 mx-auto">2019年 阅读 Text1</h5>
        <i class="bi bi-bookmark text-muted"></i>
    </div>

    <!-- 阅读工具栏 -->
    <div class="reading-tools d-flex justify-content-around">
        <button class="tool-btn" id="translateBtn">
            <i class="bi bi-translate"></i> 全文翻译
        </button>
        <button class="tool-btn" id="difficultBtn">
            <i class="bi bi-braces"></i> 长难句解析
        </button>
        <button class="tool-btn" id="vocabBtn">
            <i class="bi bi-book"></i> 生词本
        </button>
    </div>

    <!-- 阅读内容 -->
    <div class="reading-content">
        <div class="paragraph">
            <span class="paragraph-number">[1]</span>
            <div class="english-text">
                A "<span class="new-word" data-word="bleisure" data-phonetic="/ˈbleʒə/" data-meaning="商务休闲，商旅融合">bleisure</span>" trip is a journey which combines 
                <span class="new-word" data-word="business" data-phonetic="/ˈbɪznəs/" data-meaning="n. 商务，生意；adj. 商务的">business</span> and 
                <span class="new-word" data-word="leisure" data-phonetic="/ˈleʒə/" data-meaning="n. 休闲，闲暇">leisure</span>. 
                <span class="difficult-sentence" data-sentence-id="1">
                    Many people add a few days to a business trip to explore their destination, or take their partner with them.
                </span>
                The practice has become so common that some travel companies use it as a marketing tool.
            </div>
            <div class="chinese-text">
                "商旅融合"之旅是将商务和休闲结合在一起的旅行。许多人会在商务旅行中额外增加几天时间来探索目地，或带上伴侣同行。这种做法已变得如此普遍，以至于一些旅游公司将其用作营销工具。
            </div>
            <div class="sentence-analysis" id="analysis-1">
                <div class="analysis-title">长难句解析</div>
                <div class="analysis-content">
                    <div class="structure-analysis">
                        <p><strong>句子结构：</strong></p>
                        <p>主干：Many people add ... or take ...</p>
                        <p>并列谓语：</p>
                        <ul>
                            <li>add a few days to a business trip</li>
                            <li>take their partner with them</li>
                        </ul>
                        <p>目的状语：to explore their destination</p>
                    </div>
                    <div class="translation-result">
                        <p><strong>译文：</strong></p>
                        <p>许多人会在商务旅行中多加几天时间来探索目的地，或带上他们的伴侣。</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="paragraph">
            <span class="paragraph-number">[2]</span>
            <div class="english-text">
                The rise of bleisure travel reflects changes in the way we work. Technology means that many people can work remotely, while changing attitudes toward work-life balance mean that employers are more willing to accommodate personal time during business trips.
            </div>
            <div class="chinese-text">
                商旅融合旅行的兴起反映了我们工作方式的变化。科技意味着许多人可以远程工作，而对工作与生活平衡态度的改变也意味着雇主更愿意在商务旅行期间适应个人时间的需求。
            </div>
        </div>
    </div>

    <!-- 题目部分 -->
    <div class="question-section">
        <div class="question">
            <p><strong>21. According to the passage, what is "bleisure" travel?</strong></p>
            <a href="#" class="option">
                A. A type of travel that combines business and leisure activities
            </a>
            <a href="#" class="option">
                B. A marketing strategy used by travel companies
            </a>
            <a href="#" class="option">
                C. A new way of remote working
            </a>
            <a href="#" class="option">
                D. A trend in work-life balance
            </a>
        </div>

        <div class="question">
            <p><strong>22. What has contributed to the rise of bleisure travel?</strong></p>
            <a href="#" class="option">
                A. Increased travel company marketing
            </a>
            <a href="#" class="option">
                B. Changes in technology and work attitudes
            </a>
            <a href="#" class="option">
                C. Lower travel costs
            </a>
            <a href="#" class="option">
                D. Better transportation options
            </a>
        </div>
        <!-- 更多题目... -->
    </div>

    <!-- 底部工具栏 -->
    <div class="bottom-tools">
        <div>
            <button class="btn btn-outline-primary btn-sm me-2">上一篇</button>
            <button class="btn btn-outline-primary btn-sm">下一篇</button>
        </div>
        <div>
            <button class="btn btn-primary">答案解析</button>
        </div>
    </div>

    <script>
    $(document).ready(function() {
        // 翻译按钮点击事件
        $('#translateBtn').click(function() {
            $(this).toggleClass('active');
            
            if ($(this).hasClass('active')) {
                $('.chinese-text').css('display', 'block');
                setTimeout(function() {
                    $('.chinese-text').addClass('show');
                }, 10);
            } else {
                $('.chinese-text').removeClass('show');
                setTimeout(function() {
                    $('.chinese-text').css('display', 'none');
                }, 300);
            }
        });
        
        // 长难句解析按钮点击事件
        $('#difficultBtn').click(function() {
            $(this).toggleClass('active');
            $('.difficult-sentence').toggleClass('highlight');
            
            if (!$(this).hasClass('active')) {
                $('.sentence-analysis').removeClass('show');
            }
        });
        
        // 修改长难句点击事件，使用事件委托
        $(document).on('click', '.difficult-sentence, .difficult-sentence *', function(e) {
            // 获取当前点击的长难句元素（如果点击的是子元素，找到父级的长难句元素）
            const $difficultSentence = $(e.target).closest('.difficult-sentence');
            
            // 如果长难句解析按钮已激活
            if ($('#difficultBtn').hasClass('active')) {
                const sentenceId = $difficultSentence.data('sentence-id');
                const $analysis = $(`#analysis-${sentenceId}`);
                
                // 切换长难句解析的显示状态
                if ($analysis.hasClass('show')) {
                    $analysis.removeClass('show');
                    setTimeout(() => {
                        $analysis.css('display', 'none');
                    }, 300);
                } else {
                    // 隐藏其他所有显示的解析
                    $('.sentence-analysis').removeClass('show').css('display', 'none');
                    
                    // 显示当前点击的解析
                    $analysis.css('display', 'block');
                    setTimeout(() => {
                        $analysis.addClass('show');
                    }, 10);
                }
                
                // 阻止事件冒泡
                e.stopPropagation();
                return false;
            }
        });

        // 生词本按钮点击事件
        $('#vocabBtn').click(function() {
            $(this).toggleClass('active');
            $('.new-word').toggleClass('highlight');
        });

        // 生词点击事件
        $('.new-word').click(function(e) {
            if ($('#vocabBtn').hasClass('active')) {
                const word = $(this).data('word');
                const phonetic = $(this).data('phonetic');
                const meaning = $(this).data('meaning');

                // 创建或更新tooltip
                let tooltip = $('.word-tooltip');
                if (tooltip.length === 0) {
                    tooltip = $('<div class="word-tooltip"></div>').appendTo('body');
                }

                // 设置tooltip内容
                tooltip.html(`
                    <div><strong>${word}</strong></div>
                    <div>${phonetic}</div>
                    <div>${meaning}</div>
                `);

                // 定位tooltip
                const rect = this.getBoundingClientRect();
                tooltip.css({
                    top: rect.bottom + window.scrollY + 5 + 'px',
                    left: rect.left + 'px'
                }).addClass('show');

                // 点击其他关闭tooltip
                $(document).one('click', function(e) {
                    if (!$(e.target).hasClass('new-word')) {
                        tooltip.removeClass('show');
                    }
                });

                e.stopPropagation();
            }
        });

        // 为所有英文单词添加可点击效果
        $('.english-text').each(function() {
            let text = $(this).html();
            // 使用正则表达式匹配英文单词，排除HTML标签
            text = text.replace(/\b([a-zA-Z]+)\b(?![^<]*>)/g, '<span class="word-clickable">$1</span>');
            $(this).html(text);
        });

        // 修改单词点击事件
        $(document).on('click', '.word-clickable', function(e) {
            // 如果长难句解析模式激活且该单词在长难句内，不触发单词点击事件
            if ($('#difficultBtn').hasClass('active') && $(this).closest('.difficult-sentence').length > 0) {
                return;
            }

            // 移除其他单词的高亮
            $('.word-clickable').not(this).removeClass('highlighted');
            $(this).toggleClass('highlighted');

            const word = $(this).text();
            
            // 检查是否是生词（是否有new-word类或在new-word元素内）
            const isNewWord = $(this).hasClass('new-word') || $(this).closest('.new-word').length > 0;
            
            // 创建或更新tooltip
            let tooltip = $('.word-tooltip');
            if (tooltip.length === 0) {
                tooltip = $('<div class="word-tooltip"></div>').appendTo('body');
            }

            // 设置tooltip内容，根据是否是生词决定是否显示收藏按钮
            tooltip.html(`
                <div class="tooltip-header">
                    <strong>${word}</strong>
                    ${isNewWord ? '' : '<button class="collect-word-btn">添加生词</button>'}
                </div>
                <div class="word-phonetic">/示例音标/</div>
                <div class="word-meaning">n. 示例释义</div>
            `);

            // 定位tooltip
            const rect = this.getBoundingClientRect();
            tooltip.css({
                top: rect.bottom + window.scrollY + 5 + 'px',
                left: rect.left + 'px'
            }).addClass('show');

            // 点击其他地方关闭tooltip
            $(document).one('click', function(e) {
                if (!$(e.target).closest('.word-tooltip').length) {
                    tooltip.removeClass('show');
                    $('.word-clickable').removeClass('highlighted');
                }
            });
        });

        // 收藏按钮点击事件
        $(document).on('click', '.collect-word-btn', function(e) {
            e.stopPropagation();
            $(this).toggleClass('collected');
            if ($(this).hasClass('collected')) {
                $(this).text('已添加');
            } else {
                $(this).text('添加生词');
            }
        });

        // 添加答案解析按钮点击事件
        $('.btn-primary').click(function() {
            // 获取当前文章的标识（从标题中）
            const examTitle = $('.header h5').text().trim(); // "2019年 阅读 Text1"
            
            // 构建答案解析页面的URL
            // 假设答案解析页面的命名规则是 "english-reading-analysis.html?exam=2019&part=text1"
            const year = examTitle.match(/\d{4}/)[0];
            const part = examTitle.toLowerCase().split(' ')[2];
            
            // 跳转到答案解析页面
            window.location.href = `english-reading-analysis.html?exam=${year}&part=${part}`;
        });
    });
    </script>
</body>
</html>
